<template>
	<view class="Lu-course-box">
		<view class="Lu-course-header">
			<view class="Lu-course-back" @click="navback()">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<view class="Lu-course-proimg">
				<image class="Lu-course-img" :src="apiUrl + courseinfor.course_pic" mode="aspectFill"></image>
			</view>
			<view class="Lu-course-title">
				<view class="Lu-course-name">{{courseinfor.course_name}}</view>
				<view class="Lu-course-introduce" v-html='courseinfor.course_class_details'></view>
				<view class="Lu-course-adress clearfix">
					<text>￥</text>{{courseinfor.course_platform_price}}
				</view>
			</view>
		</view>
		<view class="Lu-course-body">
			<view class="Lu-course-bodytit">
				商品信息
			</view>
			<view class="Lu-course-Course">
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">商品名称</view>
					<view class="Lu-course-tdcontent">{{courseinfor.course_name}}</view>
				</view>
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">商品节数</view>
					<view class="Lu-course-tdcontent">共{{courseinfor.course_num}}节</view>
				</view>
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">时长</view>
					<view class="Lu-course-tdcontent">{{courseinfor.duration}}分钟</view>
				</view>
				<!-- <view class="Lu-course-tr clearfix">
					<view class="Lu-course-tdtitle">上课时间</view>
					<view class="Lu-course-tdcontent">{{courseinfor.class_time}}</view>
				</view> -->
			</view>
		</view>
		<view class="Lu-course-footer clearfix">
			<view class="Lu-course-zhuye fl" @click="navback()">
				<view class="iconfont icon-zhuye Lu-course-icon"></view>
				<view class="Lu-course-biao">商家</view>
			</view>
			<view class="Lu-course-phone fl" @click="gophone(courseinfor.phone)">
				<view class="iconfont icon-phone1 Lu-course-icon"></view>
				<view class="Lu-course-biao">电话</view>
			</view>
			<view class="Lu-course-buy fr" @click="buykecheng()">
				立即付款
			</view>
		</view>
		 <denglu v-on:user="userinfos" v-if="hidden[0]"></denglu>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import md5 from 'js-md5';
	import denglu from "@/wxcomponents/ah-denglu/denglu.vue"
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		components: {denglu},
		data(){
			return{
				courseinfor:{},
				course_goods_id:'',
				fkuser:{
					name:'',
					phone:''
				},
				hidden:[false]
			}
		},
		onLoad: function(option) {
			this.course_goods_id= option.id;
			this.wxgetcourseinfor()
		},
		onShow:function(){
			console.log(this.hidden[0])
		},
		
		methods:{
			userinfos:function(data,data2){
				this.fkuser = data
				this.$set(this.hidden,0,data2)
				console.log(this.hidden[0])
			},
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			wxgetcourseinfor:function(){
				uni.request({
					url:this.apiUrl+ 'api/get_curriculum_info',
					data:{
						course_goods_id:this.course_goods_id
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.courseinfor = res.data.data
					}
				})
			},
			gophone:function(phone){
				uni.makePhoneCall({
				 	
				 	// 手机号
				    phoneNumber: phone, 
				
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
				
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
					
				  });
			},
			buykecheng:function(){
				if(this.hasLogin == true){
					var _this = this
					uni.getStorage({
					    key: 'user',
					    success: function (res) {	
					        const shortName =  _this.openId.substring(0, _this.userInfo.id%10) +  _this.courseinfor.course_platform_price*100;
					        uni.request({
					        	url: _this.apiUrl+ 'api/payment',
					        	data:{
					        		money: _this.courseinfor.course_platform_price*100,
					        		sign:md5(shortName),
					        		type:1,
					        		course_goods_id: _this.course_goods_id,
					        		user_name: _this.fkuser.name,
					        		user_phone: _this.fkuser.phone
					        	},
					        	method:'POST',
					        	header:{
					        		openid: _this.openId
					        	},
					        	success: (res) => {
					        		console.log(res.data.data)
					        		uni.requestPayment({
					        			provider: 'wxpay',
					        			timeStamp: res.data.data.timeStamp,
					        			nonceStr: res.data.data.nonceStr,
					        			package: res.data.data.package,
					        			signType: res.data.data.signType,
					        			paySign: res.data.data.paySign,
					        			success: function (res) {
					        			   uni.showModal({
					        				   title: '支付成功',
											   content:'支付成功',
					        				   success: function (res) {
					        					   if (res.confirm) {
					        						  
					        					   } else if (res.cancel) {
					        						   
					        					   }
					        				   }
					        			   })
					        			},
					        			fail: function (err) {
					        				uni.showModal({
					        					title: '支付失败',
												content:'支付失败',
					        					success: function (res) {
					        						if (res.confirm) {
					        						   
					        						} else if (res.cancel) {
					        							
					        						}
					        					}
					        				})
					        			}
					        		});
					        	}
					        })
					    },
						fail:function(res){
							_this.$set( _this.hidden,0,true)
						}
					});
				}else{
					uni.showModal({
					    title: '未登录',
					    content: '请授权登录',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}
				
			}
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}
	.Lu-course-box{
		.Lu-course-header{
			position: relative;
			.Lu-course-back{
				position: absolute;
				top: 60rpx;
				left: 0;
				z-index: 5;
				margin: 0 30rpx;
				font-size: 30rpx;
				background-color: #999;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				text{
					color: #fff;
				}
			}
			.Lu-course-proimg{
				width: 100%;
				.Lu-course-img{
					width: 100%;
					height: 400rpx;
					image{
						width: 100%;
						
					}
				}
			}
			.Lu-course-title{
				padding: 20rpx 30rpx;
				background-color: #fff;
				.Lu-course-name{
					font-size: 36rpx;
					color: #333333;
				}
				.Lu-course-introduce{
					font-size: 28rpx;
					color: #999999;
					margin: 20rpx 0;
				}
				.Lu-course-adress{
					font-size: 38rpx;
					color: #ff3e3e;
					text{
						font-size: 28rpx !important;
						
					}
				}
			}
		}
		.Lu-course-body{
			margin: 20rpx;
			padding-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.Lu-course-bodytit{
				
				background-image: url(~@/static/image/classific/bg22.png);
				background-size: 240rpx 80rpx;
				background-repeat: no-repeat;
				height: 80rpx;
				width: 240rpx;
				line-height: 70rpx;
				text-align: center;
				margin: 0 auto;
				
				font-size: 34rpx;
				color: #fff;
			}
			.Lu-course-Course{
				margin: 20rpx 20rpx 0;
				padding: 20rpx;
				.Lu-borderbottom{
					border-bottom: 2rpx solid #e5e5e5;
				}
				.Lu-course-tr{
					padding: 20rpx 0;
					.Lu-course-tdtitle{
						float: left;
						margin-right: 50rpx;
						font-size: 30rpx;
						font-weight: 600;
					}
					.Lu-course-tdcontent{
						float: right;
						font-size: 30rpx;
						color: #999999;
						margin-left: 50rpx;
					}
				}
			}
		}
		.Lu-course-footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			// line-height: 100rpx;
			background-color: #fff;
			.Lu-course-icon{
				font-size: 48rpx;
				color: #999999;
			}
			.Lu-course-biao{
				font-size: 24rpx;
				color: #999999;
			}
			.Lu-course-zhuye{
				margin-left: 70rpx;
				text-align: center;
				margin-top:8rpx ;
			}
			.Lu-course-phone{
				margin-left: 70rpx;
				text-align: center;
				margin-top:8rpx ;
			}
			.Lu-course-buy{
				background-image: url(~@/static/image/classific/buybg.png);
				background-size: 340rpx 80rpx;
				background-repeat: no-repeat;
				width: 340rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-right: 20rpx;
				font-size: 34rpx;
				color: #fff;
			}
		}
	}
		
</style>
